<template>
    <div>
        <el-row class="toolbar">
            <div align="center" style="  margin-left: 15%;margin-right: 15%;">
                <el-alert title='公告:' type="info">
                    {{communityNotice.content}}
                </el-alert>
            </div>
            <ul class="community-info-ul">
                <li class="community-card-item" v-for="(item, idx) in listData" style="background: #777"  @click="toCommunityPostList(item.id)">
                    <div class="community-card-i-wrap" style="margin: 0; padding: 0;text-align: center;background: #777">
                        <div class="community-info-name">{{item.name}}</div>
                        <div class="community-info-remark">{{item.remark}}</div>
                    </div>
                </li>
            </ul>
        </el-row>
    </div>
</template>

<script>
    import  { getCommunityInfos } from '../../../module/admin/community/communityInfo';
    import  { getCommunityNotice } from '../../../module/admin/community/communityNotice';
    export default {
        data () {
            return {
                listData: [],
                communityNotice: '',
                search:{
                    key: '',
                    value:'sort',
                },
                loading: true,
                visible2: false,
                filter: {
                    pageNum: 1,
                    pageSize: 10,
                },
                total: 0,
                currentPage4: 1,
            }
        },
        mounted () {
            let _this = this;
            getCommunityInfos(_this);
            getCommunityNotice().then(data => {
               this.communityNotice = data;
            })
        },
        methods: {
            toCommunityPostList(val) {
                let communityInfoId = val;
                this.$router.push({
                    name:'reader-community-post-list',
                    params: {
                        communityInfoId: communityInfoId
                    }
                })
            },
            handleSearch(val) {
                this.search.key = val;
                getCommunityInfos(this)
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
        }
    }
</script>

<style>
    body {
        font-family: Helvetica, sans-serif;
    }
    .toolbar {
        margin: 20px 0;
    }
    .community-info-ul {
        margin-left: 20%;
    }
    .community-card-item {
        width: 300px;
        height: 200px;
        float: left;
        position: relative;
        z-index: 1;
        _display: inline;
        margin-right: 40px;
        margin-top: 30px;
    }
    .community-card-item:hover {
        cursor:pointer;
        width: 298px;
        height: 198px;
        border:1px solid #D4D4D4;

    }
    .community-card-item .community-card-i-wrap {
        width: 220px;
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        background: #fff;
        padding: 38px 9px 10px 0;
    }
    .community-info-name {
        font-size: 26px;
        padding: 50px 50px;
    }
</style>
